import { InputNumber, Select } from 'antd';
import { useState } from 'react';
const { Option } = Select;

export default ({
  value = { changeType: undefined, changeNum: undefined },
  onChange,
  options = [],
  placeholder,
}) => {
  const [defaultValue, setValue] = useState(value);
  const addonBefore = () => {
    return (
      <Select
        defaultValue={options && options[0] && options[0].value}
        value={defaultValue.code1}
        style={{ width: 120 }}
        onChange={(value) => {
          onChange?.({ ...defaultValue, changeType: value });
          setValue({ ...defaultValue, changeType: value });
        }}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.value}>
            {option.label}
          </Option>
        ))}
      </Select>
    );
  };
  return (
    <InputNumber
      addonBefore={addonBefore()}
      value={defaultValue.code2}
      onChange={(value) => {
        onChange?.({ ...defaultValue, changeNum: value });
        setValue({ ...defaultValue, changeNum: value });
      }}
      min={0}
      step={1}
      placeholder={placeholder}
    />
  );
};
